<template>
  <div class="form-generator">
    <div style="float: right">
      <a-button type="primary" @click="showTheCode()">生成代码</a-button>
    </div>
    <div style="height: 15px; clear: both"></div>
    <a-row>
      <a-col :span="6">
        <!--  -->
        <div class="components">
          <h1>添加组件区</h1>
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 17 }">
            <a-form-item label="字段名">
              <a-input v-model="addData.label" />
            </a-form-item>
            <a-form-item label="代码变量名">
              <a-input v-model="addData.model" />
            </a-form-item>
            <a-form-item label="组件类型">
              <a-select v-model="addData.tag">
                <a-select-option value="a-input"> 单行文本 </a-select-option>
                <a-select-option value="a-textarea"> 多行文本 </a-select-option>
                <a-select-option value="a-select"> 下拉选择 </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
              <a-button @click="addTest"> Submit </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
      <a-col :span="18">
        <div class="show">
          <!--  -->
          <h1>效果预览区</h1>
          <div style="max-width: 500px">
            <MyForm :renderJson="renderJson" :render_config="render_config">
              111
            </MyForm>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import MyForm from "@/views/FormGenerator/MyForm.jsx";
import { createVueFileTemplate } from "@/views/FormGenerator/VueTemplate.js";
import Vue from "vue";
export default {
  data() {
    return {
      VueFileTemplate: "",
      addData: {
        label: "",
        tag: "",
      },
      a: 11,
      renderJson: [
        {
          label: "aaa",
          tag: "a-input",
        },
      ],
      render_config: {
        tag: "a-form-model",
        model: "form", // 变量名
        property: {
          "label-col": "{ span: 4 }",
          "wrapper-col": "{ span: 14 }",
        },
        children: [],
      },
    };
  },
  components: {
    MyForm,
  },

  mounted() {
    console.clear();
    // this.addTest();
  },
  methods: {
    addTest() {
      this.render_config.children.push(this.addData);
      this.createCode();
      this.addData = {};
    },

    // --- 生成 Template 内代码---
    createTemplateCode() {
      const { tag, property, model, children } = this.render_config;

      let propertyString = ""; // 生成属性字符串
      let formItem = ""; // 生成表单内模块

      function formItemtemplate(_item) {
        let inText = "";
        if (_item.tag === "a-select") {
          inText = `<${_item.tag} v-model="${model}.${_item.model}">
              <a-select-option value="选项一">
                选项一
              </a-select-option>
              <a-select-option value="选项二">
                选项二
              </a-select-option>
            </${_item.tag}>`;
        } else {
          inText = `<${_item.tag} v-model="${model}.${_item.model}">
            </${_item.tag}>`;
        }

        return `
          <!-- 表单元素 -->
          <a-form-model-item label='${_item.label}'>
            ${inText}
          </a-form-model-item>\n`;
      }

      Object.keys(property).forEach((key) => {
        propertyString += `${key}="${property[key]}" `;
      });

      children.forEach((item) => {
        formItem += formItemtemplate(item);
      });

      let form = `<!-- 表单开始 -->
        <a-form-model :model="${model}" ${propertyString}>
          ${formItem}
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" >
            <a-button @click="submit()">提交</a-button>
          </a-form-model-item>
        </a-form-model>`;

      return form;
    },
    // --- 生成 ScriptCode 中的代码 ---
    createScriptCode() {
      const { model, children } = this.render_config;
      let itemVar = "";
      let isFirst = false; // 判断是否是第一次
      children.forEach((item) => {
        isFirst ? (itemVar += "              ") : (isFirst = true); // 控制缩进
        itemVar += `${item.model}:'', // ${item.label}\n`;
      });

      return `
        data(){
          return {
            ${model}:{
              ${itemVar}
            }
          }
        },
        methods:{
          submit(){
            console.log('表单提交的数据为',this.${model})
          }
        },
      `;
    },

    createCode() {
      const render_config = this.render_config;

      let template = this.createTemplateCode();
      let script = this.createScriptCode();
      let style = ``;

      let VueFileTemplate = createVueFileTemplate(template, script, style);
      this.VueFileTemplate = VueFileTemplate;

      console.log(VueFileTemplate);
    },

    handleSelectChange() {},

    showTheCode() {
      this.$router.push({
        name: "Code",
        params: { code: this.VueFileTemplate },
      });
    },
  },
};
</script>

